import { VNode } from "vue";
import { Component, Vue } from "vue-property-decorator";
import { getModule } from "vuex-module-decorators";
import { OrderModule, Order } from "@/store/modules/order";
import { BrowserHead } from "@/mixins/head";

@Component
export default class OrderList extends Vue {
  private msg: string = "订单列表";

  private OrderModuleInstance!: OrderModule;

  public created(): void {
    this.OrderModuleInstance = getModule(OrderModule, this.$store);
    // console.log(this.OrderModuleInstance.list);
  }

  // eslint-disable-next-line class-methods-use-this
  // public serverPrefetch(): Promise<any> {
  //   return new Promise((resolve, reject) => {
  //     console.log(`hoho serverPrefetch, \tserver: ${this.$isServer}`);
  //     setTimeout(() => reject({ url: '/405' }), 200);
  //   });
  // }

  public static async asyncData({ store, route }): Promise<any> {
    const OrderModuleInstance = getModule(OrderModule, store);
    await OrderModuleInstance.getList(route.query);
  }

  public browserHead(): BrowserHead {
    return {
      title: this.msg
    };
  }

  // private async onClick(): Promise<void> {
  //   await this.OrderModuleInstance.getList();
  // }

  public render(): VNode {
    return (
      <div class="view">
        订单列表页
        <ul>
          {this.OrderModuleInstance.list.map(
            (order: Order): VNode => (
              <li>
                {order.id} | {order.order_sn}
              </li>
            )
          )}
        </ul>
      </div>
    );
  }
}
